<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'contact.jsp' starting page</title>
    
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	
	

  </head>
  
  <body class="body">
    <%@ include file = "include/top.jsp" %>
    <div class="container">
    <div class="row " >
		<div class="span3">
			<%@ include file="include/left.jsp" %>
		</div>
		<div class="span9 ">
			<div class="span2">
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
					<li class="active">
						<a href=""><i class="icon-user"></i>联系人列表</a>
					</li>
				</ul>
				<br/>
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
					<li class="active">
						<a href="newcontact.jspx"><i class="icon-plus"></i>添加联系人</a>
					</li>
				</ul>
				
				
				<ul class="unstyled" style="margin-top:15px">
					<c:forEach items="${requestScope.list }" var="contact" varStatus="vs">
					<li style="line-height:30px">
						<i class="icon-list-alt"></i>&nbsp;&nbsp;<a class="contactname" rel="${contact.id }" href="javascript:;">${contact.name }</a>
					</li>
					<input type="hidden" id="contactid" value="${contact.id }">
					</c:forEach>
					<c:if test="${empty requestScope.list }" >
						<li>还没有联系人，快快把他们加进来吧！</li>
					</c:if>
				</ul>
				
			</div>
			
			<div class="span5 offset1">
				
				<div id="contactmessage" >
				
				</div>
				
				<div id="record">
				
				</div>	
				<div id="release">
					
				</div>
			
				
			</div>
		</div>
	</div>
	<script type="text/javascript" src = "js/jquery.min.js"></script>
	<script type="text/template" id="contact_template">
		<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
			<li class="active">
				<a href="#"><i class="icon-user"></i>联系人详细信息</a>
			</li>
		</ul>
		<br/>
		<address>
					<b>{{name}}</b>　　　　　　　
					<a class="btn btn-primary" href="editcontact.jspx?id={{contactid}}"><i class="icon-pencil icon-white"></i>编辑</a>
					
					<a class="btn btn-danger" href="delcontact.jspx?id={{contactid}}"><i class="icon-trash icon-white"></i>删除</a>
					
					<p>{{companyname}}</p>
					<small>手机　　 </small>{{mobile}}<br/>
					<small>固话　　</small>{{tel}}<br/><br/>
					<small>邮箱　　</small>{{website}}<br/>
					<small>地址　　</small>{{address}}<br/><br/>
					<small>主页　　</small><a href="http://www.kaishengit.com">{{website}}</a><br/>
					<small>微博　　</small><a href="https://twitter.com/fankay">{{weibo}}</a><br/>
		</address>
	
	</script>
	<script type="text/template" id = "record_template">
		<blockquote>
			{{content}}<small>{{employeename}}发布于 {{createtime}}</small>
		</blockquote>
		
	</script>
	<script type="text/template" id = "release_template">
		<blockquote>
			<a href="contactnote.jspx?id={{contactid}}">发布新记录</a>
		</blockquote>
		
	</script>
	
	

	<script type="text/javascript">
		$(function(){
			
		
			$(".contactname").click(function(){
					var contactid = $(this).attr("rel");
					var employeename = $(this).text();
				
					$.ajax({
						type:"get",
						url:"contactajax.jspx",
						data:"contactid="+contactid,
						success:function(json){
							var recordlist = json["recordlist"];
							var id = json["contact"].id	;
							var name = json["contact"].name;
							var companyname = json["contact"].companyname;
							var mobile = json["contact"].mobile;
							var tel = json["contact"].tel;
							var email = json["contact"].email;
							var address = json["contact"].address;
							var website = json["contact"].website;
							var weibo = json["contact"].weibo;
							var content = json["contact"].content;
							var num = recordlist.length;
							var template1 = $("#contact_template").html();
							template1 = template1.replace(/{{name}}/g,name).replace(/{{companyname}}/g,companyname).replace(/{{mobile}}/g,mobile).replace(/{{tel}}/g,tel).replace(/{{address}}/g,address).replace(/{{email}}/g,email).replace(/{{website}}/g,website).replace(/{{weibo}}/g,weibo).replace(/{{contactid}}/g,contactid).replace(/{{num}}/g,num);
							$("#contactmessage").html(template1);
							
							
							if(recordlist.length>0){
								var time;
								if(recordlist.length<3){
									time = recordlist.length;
								}else{
									time = 3;
								}
								$("#record").html("");
								$("#record").append("<div class=\"line\">记录</div>");
								for(var i = 0;i<time;i++){
									var content = recordlist[i].content;
									var createtime = recordlist[i].createtime;
									
									$("#record").append("<blockquote>"+content+"<small>"+employeename+"发表于"+createtime+"</small></blockquote>");
									
									
								}
								
								
							}else{
								$("#record").html("");
								$("#record").append("<blockquote>还没有任何记录，快快写点有意思的事情吧！</blockquote>");
							}
							
								var template = $("#release_template").html();
								template = template.replace(/{{contactid}}/,contactid);
								$("#release").html(template);
						}
					}); 
				});
		});
	</script>
  </body>
</html>
